<template>
  <div>
    <div class="show-header" style="display: flex">
      <div v-if="searchable && searchPlace === 'top'" class="search-con search-con-top" style="display: flex">
        <div style="display: inline-block">
          <label>
            <Select v-model="searchKey" class="search-col">
              <Option v-for="item in columns" v-if="item.key !== 'handle' && !item.hiddenSearch" :value="item.key"
                      :key="`search-col-${item.key}`">{{ item.title }}
              </Option>
            </Select>
          </label>
        </div>
        <div style="display: inline-block">
          <label>
            <Input
              placeholder="输入关键字搜索"
              class="search-input"
              search
              enter-button
              @on-clear="handleClear"
              @on-search="handleSearch"
              v-model="searchValue"/>
          </label>
        </div>
      </div>
      <div class="search-con search-con-top" v-if="addable">
        <Button
          class="search-btn"
          @click="handleAdd"
          type="primary"
          v-can="ckPermission">
          {{addButtonName}}
        </Button>
  import TablesEdit from "./edit.vue";
  import handleBtns from "./handle-btns";
  import "./index.less";
    name: "Tables",
          return [];
          return [];
        }
      },
      ckPermission: {
        type: Array,
        default () {
          return [];
          return "";
        default: "top"
        default: "新增"
        edittingCellId: "",
        edittingText: "",
        searchValue: "",
        searchKey: "",
      };
              "input": val => {
                this.edittingText = val;
              "on-start-edit": (params) => {
                this.edittingCellId = `editting-${params.index}-${params.column.key}`;
                this.$emit("on-start-edit", params);
              "on-cancel-edit": (params) => {
                this.edittingCellId = "";
                this.$emit("on-cancel-edit", params);
              "on-save-edit": (params) => {
                this.value[params.row.initRowIndex][params.column.key] = this.edittingText;
                this.$emit("input", this.value);
                this.$emit("on-save-edit", Object.assign(params, { value: this.edittingText }));
                this.edittingCellId = "";
          });
        };
        return item;
        let options = item.options || [];
        let insideBtns = [];
          if (handleBtns[item]) insideBtns.push(handleBtns[item]);
        });
        let btns = item.button ? [].concat(insideBtns, item.button) : insideBtns;
          params.tableData = this.value;
          return h("div", btns.map(item => item(h, params, this)));
        };
        return item;
          let res = item;
          if (res.editable) res = this.suportEdit(res, index);
          if (res.key === "handle") res = this.surportHandle(res);
          return res;
        });
        this.searchKey = this.columns[0].key !== "handle" ? this.columns[0].key : (this.columns.length > 1 ? this.columns[1].key : "");
          this.$emit("handleRemoteSearch");
          this.insideTableData = this.value;
          this.$emit("handleRemoteSearch", { search_key: this.searchKey, search_value: this.searchValue });
          this.insideTableData = this.value.filter(item => item[this.searchKey].indexOf(this.searchValue) > -1);
          let res = item;
          res.initRowIndex = index;
          return res;
        });
        this.$refs.tablesMain.exportCsv(params);
        this.$refs.talbesMain.clearCurrentRow();
        this.$emit("on-current-change", currentRow, oldCurrentRow);
        this.$emit("on-select", selection, row);
        this.$emit("on-select-cancel", selection, row);
        this.$emit("on-select-all", selection);
        this.$emit("on-selection-change", selection);
        this.$emit("on-sort-change", column, key, order);
        this.$emit("on-filter-change", row);
        this.$emit("on-row-click", row, index);
        this.$emit("on-row-dblclick", row, index);
        this.$emit("on-expand", row, status);
        this.$emit("handleAdd");
        this.handleColumns(columns);
        this.setDefaultSearchKey();
        this.handleTableData();
      this.handleColumns(this.columns);
      this.setDefaultSearchKey();
      this.handleTableData();
  };
      </div>
    </div>
    <Table
      ref="tablesMain"
      :data="insideTableData"
      :columns="insideColumns"
      :stripe="stripe"
      :show-header="showHeader"
      :width="width"
      :height="height"
      :loading="loading"
      :disabled-hover="disabledHover"
      :highlight-row="highlightRow"
      :row-class-name="rowClassName"
      :size="size"
      :no-data-text="noDataText"
      :no-filtered-data-text="noFilteredDataText"
      @on-current-change="onCurrentChange"
      @on-select="onSelect"
      @on-select-cancel="onSelectCancel"
      @on-select-all="onSelectAll"
      @on-selection-change="onSelectionChange"
      @on-sort-change="onSortChange"
      @on-filter-change="onFilterChange"
      @on-row-click="onRowClick"
      @on-row-dblclick="onRowDblclick"
      @on-expand="onExpand"
    >
      <slot name="header" slot="header"/>
      <slot name="footer" slot="footer"/>
      <slot name="loading" slot="loading"/>
    </Table>
  </div>
</template>

<script>

  export default {
    props: {
      value: {
        type: Array,
        default () {
        }
      },
      columns: {
        type: Array,
        default () {
        }
      },
      size: String,
      width: {
        type: [Number, String]
      },
      height: {
        type: [Number, String]
      },
      stripe: {
        type: Boolean,
        default: false
      },
      border: {
        type: Boolean,
        default: false
      },
      showHeader: {
        type: Boolean,
        default: true
      },
      highlightRow: {
        type: Boolean,
        default: false
      },
      rowClassName: {
        type: Function,
        default () {
        }
      },
      context: {
        type: Object
      },
      noDataText: {
        type: String
      },
      noFilteredDataText: {
        type: String
      },
      disabledHover: {
        type: Boolean
      },
      loading: {
        type: Boolean,
        default: false
      },
      remoteSearch: {
        type: Boolean,
        default: false
      },
      /**
       * @description 全局设置是否可编辑
       */
      editable: {
        type: Boolean,
        default: false
      },
      /**
       * @description 是否可搜索
       */
      searchable: {
        type: Boolean,
        default: false
      },
      /**
       * @description 搜索控件所在位置，'top' / 'bottom'
       */
      searchPlace: {
        type: String,
      },
      /**
       * @description 是否有添加按钮
       */
      addable: {
        type: Boolean,
        default: false
      },
      addButtonName: {
        type: String,
      }
    },
    /**
     * Events
     * @on-start-edit 返回值 {Object} ：同iview中render函数中的params对象 { row, index, column }
     * @on-cancel-edit 返回值 {Object} 同上
     * @on-save-edit 返回值 {Object} ：除上面三个参数外，还有一个value: 修改后的数据
     */
    data () {
      return {
        insideColumns: [],
        insideTableData: [],
    },
    methods: {
      suportEdit (item, index) {
        item.render = (h, params) => {
          return h(TablesEdit, {
            props: {
              params: params,
              value: this.insideTableData[params.index][params.column.key],
              edittingCellId: this.edittingCellId,
              editable: this.editable
            },
            on: {
              },
              },
              },
              }
            }
      },
      surportHandle (item) {
        options.forEach(item => {
        item.render = (h, params) => {
      },
      handleColumns (columns) {
        this.insideColumns = columns.map((item, index) => {
      },
      setDefaultSearchKey () {
      },
      handleClear (e) {
        if (this.remoteSearch) {
        } else {
        }
      },
      handleSearch () {
        if (this.remoteSearch) {
        } else {
        }
      },
      handleTableData () {
        this.insideTableData = this.value.map((item, index) => {
      },
      exportCsv (params) {
      },
      clearCurrentRow () {
      },
      onCurrentChange (currentRow, oldCurrentRow) {
      },
      onSelect (selection, row) {
      },
      onSelectCancel (selection, row) {
      },
      onSelectAll (selection) {
      },
      onSelectionChange (selection) {
      },
      onSortChange (column, key, order) {
      },
      onFilterChange (row) {
      },
      onRowClick (row, index) {
      },
      onRowDblclick (row, index) {
      },
      onExpand (row, status) {
      },
      handleAdd: function () {
      },
    },
    watch: {
      columns (columns) {
      },
      value (val) {
        // if (this.searchable) this.handleSearch()
      }
    },
    mounted () {
    }
</script>
